<template>
    <div :class="`tech-shop-order-cancel ${mode}`">
        <TechPanel class="goods-list" title="退款商品" :isBold="true" :mode="mode">
            <ServerGoodsInfo v-for="(item, index) in goodsList" :isBlock="false" :key="index" :info="item" :mode="mode" :styleMode="styleMode" :theme="theme" />
        </TechPanel>
        <TechPanel class="info-list" :hasTitle="false" :mode="mode">
            <TechCell class="detail-item refund-price" label="退款金额">
                <div class="price-value" slot="value">
                    <span class="label">￥</span>{{afterSaleOrderInfo.trans / 100}}{{afterSaleOrderInfo.delivery_fee ? `(含配送费${afterSaleOrderInfo.delivery_fee / 100})` : ''}}
                </div>
            </TechCell>
            <TechCell class="detail-item" label="退款原因" :type="reason ? 'normal' : 'gray'" :value="reason ? reason : '请选择原因'" is-link @click="openSelectRefundReason" />
            <TechCell class="detail-item" label="退款备注" :type="remark ? 'normal' : 'gray'" :value="remark ? remark : '填写备注(选填)'" is-link @click="openRemarkModal" />
        </TechPanel>
        <div class="action-container">
            <Button :style="themeBackround" :round="buttonRound" size="large" @click="apply">提交申请</Button>
        </div>
        <SelectRefundReason ref="reason" :type="0" @ensure="ensureReason" :mode="mode" :styleMode="styleMode" :theme="theme" />
        <ServerRemark ref="remark" @ensure="ensureRemark" :defaultRemark="remark" :mode="mode" :styleMode="styleMode" :theme="theme" />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Button } from 'vant';
import { TechPanel, TechCell } from '@components/base';
import { CountControl } from '@components/shop';
import ServerGoodsInfo from './aftersale/ServerGoodsInfo';
import SelectGoodsStatus from './aftersale/SelectGoodsStatus';
import SelectRefundReason from './aftersale/SelectRefundReason';
import ServerRemark from './aftersale/ServerRemark';

import { repalceTo, setTitle } from '@common/utils';
import { SHOP_ORDER_AFTER_SALE_TYPE } from '@constants/shop';
import { getUiMode, getUiTheme, getUiStyleMode } from '@biztools/info';
import { DEFAULT_MODE, DEFAULT_THEME, DEFAULT_STYLE_MODE } from '@constants/style';
import { PageMixin } from '@common/mixin';
import logger from '@common/logger';
import { ClearTip, Tip, TipLoading } from '@common/tip';
export default {
    name: 'ShopOrderCancel', // 整单取消-售后模式
    mixins: [PageMixin],
    components: {
        TechPanel,
        TechCell,
        Button,
        CountControl,
        ServerGoodsInfo,
        SelectGoodsStatus,
        SelectRefundReason,
        ServerRemark,
    },
    data() {
        return {
            reason: '',
            remark: '',
        };
    },
    computed: {
        ...mapState({
            afterSaleOrderInfo: state => state.orderDetail.afterSaleOrderInfo,
        }),
        goodsList() {
            logger.info('ShopOrderCancel => 整单取消商品列表：', this.afterSaleOrderInfo.details);
            return this.afterSaleOrderInfo.details;
        },
        totalPrice() {
            let price = 0;
            this.goodsList.forEach(item => price += item.trans);
            return price.toFixed(2);
        },
    },
    created() {
        setTitle('申请退款');
        console.log(this.afterSaleOrderInfo);
    },
    methods: {
        ...mapActions([
            'applyAfterSaleService',
        ]),
        openSelectRefundReason() {
            this.$refs.reason.show();
        },
        openRemarkModal() {
            this.$refs.remark.show();
        },
        ensureReason(value) {
            this.reason = value;
        },
        ensureRemark(value) {
            this.remark = value;
        },
        ensureParam() {
            if (!this.reason) {
                Tip('请先选择原因');
                return false;
            }
            return true;
        },
        async apply() {
            if (this.ensureParam()) {
                TipLoading('提交申请中...');
                const { order_number, details } = this.afterSaleOrderInfo;
                const param = {
                    order_number: this.afterSaleOrderInfo.order_number,
                    type: SHOP_ORDER_AFTER_SALE_TYPE.all,
                    remark: this.remark,
                    reason: this.reason,
                    details: [],
                };
                const backId = await this.applyAfterSaleService(param);
                if (backId) {
                    repalceTo(`shop-order/after-sale/detail/${backId}`);
                    ClearTip();
                }
            }
        },
    },
};
</script>

<style lang="less">
.tech-shop-order-cancel {
    .mode-white();
    min-height: 100vh;
    &.white {
        background-color: @shop-bg-color;
    }
    &.black {
        background-color: @black;
        .van-cell__label {
            color: @black-title-color !important;
        }
        .tech-cell-value {
            color: @black-title-color !important;
            &.value-gray {
                color: @gray-dark !important;
            }
        }
    }
    .goods-list,
    .info-list {
        box-shadow: 0px 4px 16px -4px rgba(51, 51, 51, 0.06);
        border-radius: @border-radius;
    }
    .info-list {
        .m-b(100);
        .panel-content {
            .p-t(@shop-bag-gap);
        }
    }
    .detail-item {
        .p-h(0);
        height: 44px;
        line-height: 44px;
        .van-cell__label {
            font-size: @font-size;
            color: @text-color;
        }
        &.refund-price {
            .price-value {
                font-size: @font-size-md;
                font-weight: 500;
                line-height: 1;
                font-family: @font-family-number;
                .label {
                    .m-r(-3);
                }
            }
        }
    }
    .action-container {
        position: fixed;
        left: @shop-bag-gap;
        right: @shop-bag-gap;
        bottom: @shop-bag-gap;
        bottom: calc(@shop-bag-gap + constant(safe-area-inset-bottom));
        bottom: calc(@shop-bag-gap + env(safe-area-inset-bottom));
    }
}
</style>
